<template>
  <div class="html1_6">
      <h1>1.6 HTML5的内容交互标签</h1>
      <div class="html1_6_1">
        <h2>1.6.1 datalist 标签</h2>
        <p>
          <pre>
            定义和用法
&lt;datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
【例2.6.1】datalist 标签的应用。
&lt;input id="myZZ" list="zz" />
    &lt;datalist id="zz">
        &lt;option value="人事">
        &lt;option value="反腐">
        &lt;option value="理论">
    &lt;/datalist>
示例
          </pre>
        </p>
       <video src="../assets/h5实例视频/datalist标签.mp4" width="600px" controls></video>
       <img src="../assets/images/2.26.png" alt="">
        <p>图2.6.1 datalist标签实例</p>
      </div>
      <div class="html1_6_2">
        <h2>1.6.2 details标签</h2>
        <p>
          <pre>
            定义和用法
&lt;details> 标签用于描述文档或文档某个部分的细节。
浏览器支持
目前只有 Chrome 和 Safari 6 支持 &lt;details> 标签。
提示：与 &lt;summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
【例2.6.2】 details 标签的应用。
&lt;details>
        &lt;summary>Copyright 2011.&lt;/summary>
        &lt;p>All pages and graphics on this web site are the property of W3School.&lt;/p>
    &lt;/details>
示例
          </pre>
        </p>
        <video src="../assets/h5实例视频/details.mp4" width="600px" controls></video>
       <img src="../assets/images/2.27.png" alt="">
        <p>图2.6.2 details标签实例</p>
      </div>
      <div class="html1_6_3">
        <h2>1.6.3 source标签</h2>
        <p>
          <pre>
            定义和用法
&lt;source> 标签为媒介元素（比如 &lt;video> 和 &lt;audio>）定义媒介资源。
&lt;source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
          </pre>
        </p>
        <p class="tab">表2-6  source标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>media</td>
            <td>media query</td>
            <td>规定媒体资源的类型。</td>
          </tr>
          <tr>
            <td>src</td>
            <td>url</td>
            <td>规定媒体文件的 URL。</td>
          </tr>
          <tr>
            <td>type</td>
            <td>numeric value</td>
            <td>规定媒体资源的 MIME 类型。</td>
          </tr>
        </table>
        <p>
          <pre>
            【例2.6.3】 details 标签的应用。
 &lt;audio controls>
        &lt;source src="horse.ogg" type="audio/ogg">
        &lt;source src="horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
  &lt;/audio> 
示例
          </pre>
        </p>
        <img src="../assets/images/2.28.png" alt="">
        <p>图2.6.3  source标签实例</p>
      </div>
      <div class="html1_6_4">
        <h2>1.6.4 output标签</h2>
        <p>
          <pre>
            定义和用法
&lt;output> 标签定义不同类型的输出，比如脚本的输出。
          </pre>
        </p>
        <p class="tab">表2-6   output标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>for</td>
            <td>element_id</td>
            <td>定义输出域相关的一个或多个元素</td>
          </tr>
          <tr>
            <td>form</td>
            <td>form_id</td>
            <td>定义输入字段所属的一个或多个表单。</td>
          </tr>
          <tr>
            <td>name</td>
            <td>name</td>
            <td>定义对象的唯一名称。（表单提交时使用）</td>
          </tr>
        </table>
        <p>
          <pre>
            【例2.6.4】 output标签的应用。
&lt;form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
        &lt;input type="range" id="a" value="50">100
        +&lt;input type="number" id="b" value="50">
        =&lt;output name="x" for="a b">&lt;/output>
 &lt;/form> 
示例
          </pre>
        </p>
         <video src="../assets/h5实例视频/output标签.mp4" width="600px" controls></video>
       <img src="../assets/images/2.29.png" alt="">
        <p>图2.6.4  output标签实例</p>
      </div>
      <div class="html1_6_5">
        <h2>1.6.5 time标签</h2>
        <p>
          <pre>
            定义和用法
&lt;time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
浏览器支持
&lt;time> 标签不会在任何浏览器中呈现任何特殊效果。
          </pre>
        </p>
        <p class="tab">表2-6   time标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>datetime</td>
            <td>datetime</td>
            <td>规定日期 / 时间。否则，由元素的内容给定日期 / 时间。</td>
          </tr>
          <tr>
            <td>pubdate</td>
            <td>pubdate</td>
            <td>指示 &lt;time> 元素中的日期 / 时间是文档（或 &lt;article> 元素）的发布日期。</td>
          </tr>
        </table>
        <p>
          <pre>
            【例2.6.5】time标签的应用。
&lt;p>我们在每天早上 &lt;time>9:00&lt;/time> 开始营业。&lt;/p>
 &lt;p>我在 &lt;time datetime="2021-02-14">情人节&lt;/time> 有个约会。&lt;/p>
示例
          </pre>
        </p>
         <img src="../assets/images/2.30.png" alt="">
        <p>图2.6.5  time标签实例</p>
      </div>
      <div class="html1_6_6">
        <h2>1.6.6 wbr标签</h2>
        <p>
          <pre>
            定义和用法
Word Break Opportunity (&lt;wbr>) 规定在文本中的何处适合添加换行符。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 &lt;wbr> 元素来添加 Word Break Opportunity（单词换行时机）。
浏览器支持
所有浏览器都支持 &lt;wbr> 标签，除了 Internet Explorer。
【例2.6.6】wbr标签的应用。
&lt;p>
如果想学习 AJAX，那么您必须熟悉 XML&lt;wbr>Http&lt;wbr>Request 对象。
&lt;/p>
示例
          </pre>
        </p>
        <img src="../assets/images/2.31.png" alt="">
        <p>图2.6.6  wbr标签实例</p>
      </div>
      <div class="html1_6_7">
        <h2>1.6.7 summary标签</h2>
        <p>
          <pre>
            定义和用法
&lt;summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
提示：请与 &lt;details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。
注释："summary" 元素应该是 "details" 元素的第一个子元素。
【例2.6.7】summary标签的应用。
&lt;details>
        &lt;summary>HTML 5&lt;/summary>
        This document teaches you everything you have to learn about HTML 5.
&lt;/details>
示例
          </pre>
        </p>
        <img src="../assets/images/2.32.png" alt="">
        <p>图2.6.7  summary标签实例</p>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>